import Guide from '~/components/layout/guide'
import Snippet from '~/components/snippet'
import Caption from '~/components/text/caption'
import Link from '~/components/text/link'
import { Image } from '~/components/media'
import DeploySection from '~/components/guides/deploy-section'

export const meta = {
  title: 'Deploying MDX Deck with ZEIT Now',
  description:
    'Create a React based slideshow with MDX Deck and deploy it with ZEIT Now.',
  published: '2019-10-18T12:00:00.860Z',
  authors: ['msweeneydev'],
  url: '/guides/deploying-mdx-deck-with-zeit-now',
  example: 'mdx-deck',
  demo: 'https://mdx-deck.now-examples.now.sh',
  image:
    'https://og-image.now.sh/**Deploy%20MDX%20Deck**%20%3Cbr%2F%3E%20with%20ZEIT%20Now.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg&images=https%3A%2F%2Fgithub.com%2Fjxnblk%2Fmdx-deck%2Fraw%2Fmaster%2Fdocs%2Face.png',
  name: 'MDX Deck',
  type: 'app',
  editUrl: 'pages/guides/deploying-mdx-deck-with-zeit-now.mdx',
  lastEdited: '2020-02-04T12:49:00.000Z'
}

[MDX Deck](https://github.com/jxnblk/mdx-deck) is an award-winning React and MDX-based presentation framework.

## Step 1: Set Up Your MDX Deck Project

Set up an MDX Deck project with [`npm`](https://www.npmjs.com) and move into the project directory:

<Snippet dark text="npm init deck my-presentation && cd my-presentation" />
<Caption>Initializing an MDX Deck project with <Link href="https://www.npmjs.com">npm</Link> and moving into the project directory.</Caption>

## Step 2: Deploying Your MDX Deck Project with ZEIT Now

<DeploySection meta={meta} />

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
